<template>
  <el-button class="Win10Fluent">win10-样式3</el-button>
</template>

<script setup>
</script>

<style scoped>
button.Win10Fluent {
  -webkit-transition: 0.3s; /* Safari */
  transition: 0.3s;
  font-size: 14px;
  background: #ddd;
  padding: 2px;
  border-width: 0px;
  border-radius: 4px;
  color: #000;
  padding: 4px 20px 4px 20px;
  font-family: "Segoe UI", "Webly Sleek UI", "Frutiger", "Lucida Sans Unicode",
  "Lucida Grande", "Open Sans", sans-serif;
  box-shadow: 0px 1px 4px 0px #0004;
}

button.Win10Fluent:hover {
  -webkit-transition: 0.3s; /* Safari */
  transition: 0.3s;
  background: #eee;
  box-shadow: 0px 1px 6px 0px #0005;
}

button.Win10Fluent:active {
  -webkit-transition: transform 0s, background 0s; /* Safari */
  transition: transform 0s, background 0s;
  background: #888;
  -ms-transform: scale(0.97, 0.97); /* IE 9 */
  -webkit-transform: scale(0.97, 0.97); /* Safari */
  transform: scale(0.97, 0.97);
}

</style>